<!--
 * @Descripttion: 出手鸭小程序
 * @version:1.0.1 
 * @Author: HHL
 * @Date: 2023-04-28 14:24:31
 * @LastEditTime: 2023-12-14 18:47:04
 * @LastEditors: sueRimn
-->

<template>
  <view class="fixed-header page-bg">
    <view class='search'>
      <view class='search-box d-flex align-items-center'>
        <uni-icons type="search" class="icon" size="24" color="#999"></uni-icons>
        <input v-model="searchKey" placeholder="搜索手机型号" class="input" @input="$emit('onInput')" />
      </view>
    </view>
  </view>
</template>

<script>

export default {
  props: {
    searchVal: {},
  },

  computed: {
    searchKey: {
      get() {
        return this.searchVal
      },
      set(val) {
        this.$emit('update:searchVal', val)
      }
    }
  },

  created() {

  },

  methods: {
    goBack() {
      uni.navigateBack()
    }
  }
}
</script>

<style lang="scss" scoped>
.fixed-header {
  max-width: 750rpx;
  padding: 15rpx 0rpx 20rpx;
  z-index: 1;
  background: #fff;
}

.search {
  position: relative;
  width: 100%;
  padding: 12rpx 36rpx;
  // box-shadow: 0 7rpx 9rpx 0 rgba(51, 51, 51, 0.15);
  z-index: 999;
  background: #fff;
  box-sizing: border-box;

  .input{
    display: inline-block;
    background: none;
  }

  .search-box {
    background: #F6F7F9;
    border-radius: 50rpx;
    height: 72rpx;
    padding: 0 0 0 32rpx;

    .icon {
      margin: 0 10rpx 0 0rpx;
      display: inline-block;
    }

    .text {
      font-size: var(--hui-font-size-26);
      color: var(--hui-color-subtitle);
    }
  }
}
</style>
